<!-- 人员系数统计 -->
<template>
  <div>
    <div class="searchbox">
      <el-form :inline="true" size="small" label-width="100px">
        <jt-easy-collapse :has-expand="true">
          <template slot="expand">
            <el-form-item label="人员">
              <el-input size="small" placeholder="请选择人员" disabled style="width: 140px;" v-model="form.acceptUid"></el-input>
               <acceptUid-button style="display: inline-block;" @acceptUidVal="acceptUidVal"></acceptUid-button>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker v-model="form.fromDate"  type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""></el-date-picker>
            </el-form-item>
            <el-form-item label="至" label-width="25px">
              <el-date-picker v-model="form.toDate"  type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="日期:">
               <el-date-picker size="small"  :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"  style="width: 420px">
               </el-date-picker>
            </el-form-item> -->
            <el-form-item style="margin-left: 20px;">
              <el-button size="mini" type="primary" @click="showList()">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="clenaFrom">清除</el-button>
            </el-form-item>
          </template>
        </jt-easy-collapse>
      </el-form>
    </div>
    <div class="contentbox">
      <data-infomation :show.sync="isShowAdd" :modifyId='orderId' :dataEnd='fromDateEnd' :stDate='toDateEnd' @refreshAdd="showList"></data-infomation>
        <el-button plain type="primary" @click="dataInformation()">数据信息</el-button>
      <div id='my-chart' style='width：600px;height:600px'></div>
    </div>
  </div>
</template>

<script>
import {
 gePersonnelCoefficientStatistics
} from "service/task";
  import JtEasyCollapse from 'components/jt-easy-collapse/index';
  import chooseAcceptUidVal from 'dialog/report-center/acceptUid-button';
  import echarts from 'echarts';
  import DataInfo from 'dialog/report-center/statistics-of-coefficient-of-personal/data-infomation';
  export default {
    name: 'RemindingCenter',
    components: {
      'jt-easy-collapse': JtEasyCollapse,
      'acceptUid-button': chooseAcceptUidVal,
      'data-infomation': DataInfo
    },
    data() {
      return {
        date:"",
        fromDateEnd:"",
        toDateEnd:"",
        form: {
          acceptUid: "",
          fromDate: "",
          toDate: ""
        },
        id: "",
        isShowAdd:false,
         orderId: "",
        testList: []
      }
    },
    mounted() {
      //this.showList();
      this.drawLine();
    },
    methods: {
      dataInformation() {
      if(this.form.fromDate == "" || this.form.fromDate==null || this.form.fromDate == " " ||
      this.form.toDate == "" || this.form.toDate==null || this.form.toDate == " "){
          this.$message({
            type: 'error',
            message: '请选择起止时间!'
          });
          return;
        }
        this.orderId = this.id;//[0].name
        // this.fromDateEnd = this.date[0];
        // this.toDateEnd = this.date[1];
        this.fromDateEnd = this.form.fromDate;
        this.toDateEnd = this.form.toDate;
        this.isShowAdd = true;
      },
      // 负责人
      acceptUidVal(name, id) {
        this.form.acceptUid = name;
        this.id = id;
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('my-chart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '人员系数统计'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [],
            type: 'bar'
          }]
        });
      } ,
      clenaFrom(){
        this.form = {acceptUid: "",
          fromDate: "",
          toDate: ""};
        this.date="";
      },
      // 表格数据展示
      showList() {
      if(this.form.fromDate == "" || this.form.fromDate==null || this.form.fromDate == " " ||
      this.form.toDate == "" || this.form.toDate==null || this.form.toDate == " "){
          this.$message({
            type: 'error',
            message: '请选择起止时间!'
          });
          return;
        }
        gePersonnelCoefficientStatistics({
          // this.axios.get('/system/testFieldList', {
          acceptUid: this.id,
          fromDate: this.form.fromDate,
          toDate: this.form.toDate
          // fromDate: this.date[0],
          // toDate: this.date[1]
        }).then(res => {
          if(res.data.result.list) {
          this.testList = res.data.result.list;
          var xData = [];
          var yData = [];
          for(var i =0; i < this.testList.length; i++) {
            // xData[i] = this.testList[i]['acceptUid'];
            // yData[i] = this.testList[i]['count'];
            xData[i] = this.testList[i]['name'];
            yData[i] = this.testList[i]['hard_rate'];
          }
            // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('my-chart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '人员系数统计'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value'
          },
//           dataZoom: [{
//              type: 'slider',
//              show: true, //flase直接隐藏图形
//              xAxisIndex: [0],
//              left: '9%', //滚动条靠左侧的百分比
//              bottom: -5,
//              start: 0,//滚动条的起始位置
//              end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
//           }],
          color:['#4169E1'],
          series: [{
            data: yData,
            type: 'bar',
            barWidth : 50,
            itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
						},
          }]
        });
          } else {
            return;
          }
        });
      }
    }
  }
</script>
